<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
	<head>
		<th:block th:include="include :: header('修改角色')" />
	</head>
	<body class="white-bg">
		<div class="wrapper wrapper-content animated fadeInRight ibox-content">
			<form class="form-horizontal m" id="form-role-edit">
				<input id="role_id" name="role_id" type="hidden" th:value="${role.roleId}"/>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">角色名称：</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="role_name" id="role_name" th:value="${role.roleName}" required/>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">权限字符：</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="role_key" id="role_key" th:value="${role.roleKey}" required/>
						<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 控制器中定义的权限字符，如：@RequiresRoles("")</span>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label is-required">显示顺序：</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="role_sort" id="role_sort" th:value="${role.roleSort}" required/>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">状态：</label>
					<div class="col-sm-8">
						<label class="toggle-switch switch-solid">
	                        <input type="checkbox" id="status" th:checked="${role.status == '0' ? true : false}"/>
	                        <span></span>
	                    </label>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">备注：</label>
					<div class="col-sm-8">
						<textarea id="remark" name="remark" class="form-control" style="height: 80px;">[[${role.remark}]]</textarea>
					</div>
				</div>
			</form>
		</div>
		<th:block th:include="include :: footer" />
		<script type="text/javascript">
			$("#form-role-edit").validate({
				onkeyup: false,
				rules:{
					role_name:{
						remote: {
			                url: ctx + "system/role/checkRoleNameUnique",
			                type: "post",
			                dataType: "json",
			                data: {
								"role_id": function() {
								    return $("#role_id").val();
								},
								"role_name": function() {
								    return $.common.trim($("#role_name").val());
								}
			                },
			                dataFilter: function(data, type) {
			                	return $.validate.unique(data);
			                }
			            }
					},
					role_key:{
						remote: {
			                url: ctx + "system/role/checkRoleKeyUnique",
			                type: "post",
			                dataType: "json",
			                data: {
								"role_id": function() {
									return $("#role_id").val();
								},
								"role_key": function() {
								    return $.common.trim($("#role_key").val());
								}
			                },
			                dataFilter: function(data, type) {
			                	return $.validate.unique(data);
			                }
			            }
					},
					role_sort:{
						digits:true
					},
				},
				messages: {
			        "role_name": {
			            remote: "角色名称已经存在"
			        },
			        "role_key": {
			            remote: "角色权限已经存在"
			        }
			    },
			    focusCleanup: true
			});

			function edit() {
				var role_id = $("#role_id").val();
				var role_name = $("#role_name").val();
				var role_key = $("#role_key").val();
				var role_sort = $("#role_sort").val();
				var status = $("input[id='status']").is(':checked') == true ? 0 : 1;
				var remark = $("#remark").val();
				$.ajax({
					cache : true,
					type : "POST",
					url : ctx + "system/role/edit",
					data : {
						"role_id": role_id,
						"role_name": role_name,
						"role_key": role_key,
						"role_sort": role_sort,
						"status": status,
						"remark": remark
					},
					async : false,
					error : function(request) {
						$.modal.alertError("系统错误");
					},
					success : function(data) {
						$.operate.successCallback(data);
					}
				});
			}

			function submitHandler() {
		        if ($.validate.form()) {
		        	edit();
		        }
		    }
		</script>
	</body>
</html>